Kendi Web Sayfalar²n²z² Tasarlay²n!

 Bu ay Web Okulu'nda liste haz²rlamay², dokⁿman iτerisine resimler yerle■tirmeyi, dokⁿman iτerisinde yaz²tipi kullanmay² ve resimleri kullan²rken dikkat etmemiz gerekenleri ÷≡renece≡iz.

Liste Kullanmak

HTML tag'lar² kullanarak sayfa iτerisinde otomatik olarak numaraland²r²lan ve s²raland²r²lan listeler haz²rlamak τok kolayd²r, bunun iτin ÷ncelikle metnin ne biτimde listelenece≡ini seτmelisiniz. Liste haz²rlarken en τok rastlananlar² tipler <OL> ve <UL> dir. <UL> tag'²n² listeye ait olan her sat²r²n ba■²na bir nokta koymak iτin kullanabilirsiniz. <OL> tag'² ise her bir sat²r² iste≡e g÷re numaraland²rman²z² veya harflendirmenizi sa≡lar. Bu tag'lar ayr²ca bir paragraf² di≡er paragraflardan biraz ileriye itmek iτin de kullan²labilir. Liste tipini belirlemek iτin yukar²daki iki seτene≡i kullan²yoruz; peki liste seτeneklerini birbirinden ay²rmak iτin nas²l bir yol izleyece≡iz. Listenin her bir ÷≡esini belirtmek iτin ise <LI> tag'² kullan²l²r. Bu karakterleri herhangi bir sat²r²n ÷nⁿne yerle■tirdi≡inizde web taray²c²n²z bu sat²r² an²nda yeni bir liste ÷≡esi olarak kabul edecektir.
  • Birinci Sat²r
  • ▌kinci Sat²r
  • ▄τⁿncⁿ Sat²r
HTML dokⁿman²n²zda yukar²daki gibi bir g÷rⁿntⁿ elde etmek istiyorsan²z a■a≡²daki gibi kodlar kullanmal²s²n²z:

<UL>
<LI>Birinci Sat²r
<LI>▌kinci Sat²r
<LI>▄τⁿncⁿ Sat²r
</UL>

Listeyi olu■turmak iτin <OL> kullanacaksan²z bu tag'²n yan²na TYPE=X tak²s²n² girerek liste biτimini belirleyebilirsiniz. Liste ÷≡elerini s²ralatmak iτin bⁿyⁿk harfleri kullanmak istiyorsan²z X yerine A, kⁿτⁿk harflerle s²ralamak iτin a, bⁿyⁿk Roma karakterleri ile s²ralamak iτin I, kⁿτⁿk Roma karakterleri ile s²ralamak iτin I, numaralarla s²ralamak iτin ise L karakterini kullanabilirsiniz.

Bⁿyⁿk harflerle ayr²lan bir liste a■a≡²daki gibi bir koda sahip olacakt²r:

<ol type=A>
<li>Birinci Sat²r
<li>▌kinci Sat²r
<li>▄τⁿncⁿ Sat²r
</ol>

Sihirli bir TAG: <PRE>
HTML haline d÷nⁿ■tⁿrmeye ⁿ■endi≡iniz ve Internet'te aynen yer almas²n² istedi≡iniz bir metin var diyelim. Fakat bu metni HTML sayfas² iτine yerle■tirdi≡inizde ve web taray²c²n²z arac²l²≡²yla g÷rⁿntⁿledi≡inizde bⁿtⁿn formatlamalar ve paragraflar yok oluyor... ▌■te bu a■amada bir tag imdad²n²za ko■ar ve tⁿm metni HTML'ye d÷nⁿ■tⁿrmenize gerek kalmaz. <PRE> ile ba■layan metin aynen not defterinde g÷rⁿndⁿ≡ⁿ gibi g÷rⁿnⁿr, tⁿm sekme karakterleri, ENTER karakterleri HTML sayfas² iτinde yer al²r. Metnin eski haline d÷nmesi iτin </PRE> kullan²lmas² yeterlidir. Her gⁿlⁿn bir dikeni oldu≡u gibi bu gⁿlⁿn de bir k÷tⁿlⁿ≡ⁿ uzunlu≡u bir sayfay² geτen metinleri bir alt sat²ra kayd²rmamas²d²r, metnin tamam²n²n g÷rⁿnebilmesi iτin kullan²c² sayfay² sa≡a do≡ru kayd²rmal²d²r.
Herhangi bir liste iτerisinde de≡i■ik veya ayn² tipte bir liste daha aτmak mⁿmkⁿndⁿr. Bunun iτin <UL> veya <OL> tag'²n² kapatmadan tekrar bir <OL> veya <UL> girmek yeterlidir. Aτ²lan tⁿm liste tag'lar²n²n kapat²lmas² unutulmamal²d²r. Unutuldu≡u takdirde HTML sayfas² dⁿzgⁿn g÷rⁿnmeyecektir.

Resim kullanmak

Gelelim web dⁿnyas²n²n en ÷nemli ÷≡elerinden birine, resimlere. HTML dilinde her ■ey τok kolay oldu≡u gibi sayfalara resim yerle■tirmek de τok kolayd²r. Resimler sayfa iτerisinde metne g÷re sa≡a, sola, a■a≡² ve yukar² do≡ru yerle■tirilebilirler, ayr²ca boyutlar² sadece belirli de≡erler de≡i■tirilerek ayarlanabilir.

Dokⁿman²n herhangi bir yerine bir resim yerle■tirmek iτin en sade haliyle <IMG SRC="RESIM.GIF"> tag'²n² kullanabilirsiniz. Bu tag'² kulland²≡²n²zda resim hiτ bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir alternatifi olmayacakt²r.

Yukarda da belirtti≡imiz gibi resimleri kullan²rken bir τok seτene≡iniz var, bu seτenekler sayfan²n g÷rⁿnⁿmⁿnde ku■kusuz bⁿyⁿk rol oynayacakt²r. Seτeneklerden birincisi Internet eri■iminin yava■ oldu≡unu bildi≡imiz ⁿlkemizde sayfalar²n²z² g÷rⁿntⁿleyecek olan ki■ilere biraz yard²mc² olmak en az²ndan resim yⁿklenene kadar kullan²c²n²n meraklar²n² gidermek iτin kullan²labilir, bahsetti≡imiz tak² "ALT" t²r. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> sat²r²n² yazd²≡²n²zda web taray²c²n²z RESIM.GIF adl² resmi yⁿklenmeden ÷nce resmin yerine "deneme resmi" metnini girecektir, b÷ylece kullan²c² resmi g÷rmeden ne oldu≡unu bilecek ve an²nda STOP tu■una basabilecektir. (!)

Seτeneklerden biri de resmin ekranda g÷rⁿnecek boyutlar²n² ayarlamak iτin kullan²l²r bu tak² HEIGHT ve WIDTH'tir. Bu tak²lar bir arada kullan²lmal²d²r, tek ba■²na kullan²ld²≡²nda web taray²c²s² tak²y² g÷z ard² edecektir. <IMG SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> sat²r²n² yazd²≡²n²zda RESIM.GIF isimli resmin boyutu ne olursa olsun 50 piksel yⁿksekli≡e ve 100 piksel geni■li≡ine getirilerek ekranda g÷sterilecektir. Resim g÷sterirken i■inize yarayacak di≡er bir seτenek ise BORDER'd²r. Bu tak² ileride de≡inece≡imiz "Internet K²sayollar²" (Hyper Link) ile ilgili olsa da ■imdi birkaτ pⁿf noktas² vermek gerekir. Ba■ka bir URL'ye k²sayol yarat²ld²≡²nda k²sayolun ismi bir alt τizgi ile belirlenir, bu i■lem resimlerde resmin mavi bir τerτeve iτerisine al²nmas²yla belirtilir, E≡er bir resmi ba■ka bir sayfaya k²sayol olarak kullanacaksan²z ve τerτevenin g÷rⁿnmesini istemiyorsan²z BORDER=0 ifadesini kullanmal²s²n²z.

Resimleri kullan²rken dikkat etmeniz gerekenler:

* Daha ÷nce de belirtti≡imiz gibi Internet'te uzun sⁿredir yer alan kullan²c²lar, sitelerdeki bⁿyⁿk resimleri τok i■lerine yaramad²≡² sⁿrece g÷rmek istemeyeceklerdir. Bu yⁿzden, her zaman resimlerin boyutunu kⁿτⁿk, miktar²n² az tutmal²s²n²z.

* E≡er bⁿyⁿk resimler kullanacaksan²z, (bⁿyⁿk resim derken ekran² kaplayacak kadar bⁿyⁿk de≡il), bunlar² JPEG format²na τevirmenizi ve kalitesini dⁿ■ⁿrmenizi tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu yⁿzden daha h²zl² yⁿklenirler.

* Resimlere her zaman ALT tag'²n² kullanarak alternatif metinler verin, Internet'i kullananlar²n her zaman resim g÷rⁿntⁿleyebilecek, browser'² olan makineler oldu≡unu varsaymay²n. E≡er resimlere alternatif metinler verirseniz terminal ekran² kullanan kullan²c²larda bilgiye eri■ebilirler.

* GIF'leri kullan²rken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe yⁿklenir ve yava■ yava■ netle■erek resmi daha h²zl² yⁿkleniyormu■ gibi g÷sterir.

HTML ve Yaz²tipleri

Geτen ay <Hx> tag'²n²n kullan²m²n² vermi■ ve x yerine verece≡iniz de≡erler sayesinde HTML d÷kⁿman²na de≡i■ik bⁿyⁿklⁿklerde ba■l²k at²labilece≡ini s÷ylemi■tik. Bu ay ise dokⁿman iτerisinde de≡i■ik yaz² tiplerini nas²l kullanaca≡²n²z² g÷receksiniz.

Dokⁿmandaki yaz²tipini de≡i■tirmek iτin <FONT> tag² kullan²l²r, genel kullan²m² ■÷yledir:

<FONT SIZE="x" FACE="[isim] COLOR="#XXXXXX">

* SIZE de≡i■keni metnin bⁿyⁿklⁿ≡ⁿnⁿ ayarlar, bu de≡i■kene -1, +2 gibi de≡erler verilerek metnin puntosunun bir eksiltilmesini veya iki artt²r²lmas²n² sa≡layabilir, direkt olarak bir rakam vererek puntoyu tayin edebilirsiniz. HTML sayfalar²nda SIZE de≡i■kenine verebilece≡iniz en bⁿyⁿk de≡er 5'tir. 5'ten sonra verece≡iniz her de≡er siz 5 de≡eri vermi■siniz gibi muamele g÷recektir. Yaz²tipi τok bⁿyⁿk olmamal²d²r, bⁿyⁿk yaz²tipleri hem kullan²c²lar²n sayfay² okumas²n² zorla■t²r²r hem de sayfan²n gⁿzelli≡ini bozar.

* FACE tak²s²n² tⁿm web taray²c²lar² desteklemese de bu tak² kullan²larak sayfada resim kullanmadan oldukτa gⁿzel g÷rⁿntⁿler elde edilebilir. ...rne≡in FACE="Arial Tur" tak²s² kullan²ld²≡²nda yaz² tipi Tⁿrkτe Arial olacakt²r. FACE de≡erine Tⁿrkτe deste≡i olmayan "Comic Sans Ms" gibi yaz²tipleri verilmemelidir, verilirse baz² Tⁿrkτe karakterler bozuk olarak g÷rⁿlecektir.

* Son olarak COLOR tak²s² yaz²tipinin rengini ayarlamakta kullan²lmaktad²r. Web taray²c²lar²n²n destekledi≡i temel renklerden olu■an tablo geτen ay bu b÷lⁿmde verilmi■tir. Tablodan diledi≡iniz bir rengi seτerek bu de≡i■kenin kar■²s²na yazd²≡²n²zda yaz²tipi rengi de≡i■ecektir.

* <FONT> ifadesi her zaman bir </FONT> ile sonlanmal²d²r. Bu tag unutulursa web taray²c²n²z sayfalar² yanl²■ g÷rⁿntⁿleyebilir. (Bazen de hiτ g÷rⁿntⁿlemez)